<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="images/4.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/服务.css">
</head>
<body>
	<header>	
	<nav class="nav navbar-default navbar-fixed-top " style="background: transparent;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);">
	<div class="container" >
		<div class="navbar-header">
			<div class="row">
			<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-menu">
				<i class="icon-bar"></i>
				<i class="icon-bar"></i>
				<i class="icon-bar"></i>
				<i class="icon-bar"></i>
			</button>
			<a href="主页.html" id="logo"></a>
		</div>
		</div>
		<div class="collapse navbar-collapse" id="my-menu">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="案例.html" target="_blank">案例</a></li>
			<li><a href="服务.html">服务</a></li>
			<li><a href="关于.html">关于</a></li>
			<li><a href="联络.html">联络</a></li>
			</ul>
		</div>
	</nav>	
</header>
<div class="page2" >
<div class="container">
<div class="row">		
		<ul class="nav navbar-nav" id="a11">
			<li class="a1111"><a href="#page3" ><img src="images/16.png" style="width: 29px;height: 30px;"><span>品牌设计</span></a></li>
			<li><a href="#page4"><img src="images/17.png" style="width: 29px;height: 30px;"><span>界面设计</span></a></li>
			<li><a href="#page5"><img src="images/18.png" style="width: 29px;height: 30px;"><span>网站设计</span></a></li>
			<li><a href="#page6"><img src="images/18.png" style="width: 29px;height: 30px;"><span>移动设计</span></a></li>
		</ul>	
</div>
</div>
</div>
<div id="page3" style="padding-top: 80px;">
<div class="container">
	<div class="row">
		<div class="col-lg-6">
			<img src="images/24.png" style="width: 584px;height: 296px;">
		</div>
		<div class="col-lg-6">
			<h1>品牌设计</h1>
			<p>品牌不仅关乎设计一个Logo那么简单，即便是一个Logo也需要考虑图形，字体，颜色等多元素的融合。品牌作为视觉传播手段，情感化因素触及到每一处。我们以跨界思维设计每一个品牌，充分考虑简约，易记，永不过时，无论是在传统的印刷上，还是新型的应用媒介上，让其尽显本色</p>
		</div>
	</div>
</div>
</div>
<div id="page4" style="background: #eeeeee;padding-top: 40px;padding-bottom: 40px;">
	<div class="container">
		<div class="row">
			<h1 class="col-lg-2 col-lg-offset-5 col-xs-4 col-xs-offset-4">界面设计</h1>			
		</div>
		<div class="row">			
			<p class="col-lg-9 col-lg-offset-2" style="line-height: 24px;text-align: center;vertical-align: baseline;">我们设计的每一款产品都围绕着做真实的设计。简洁，优雅，更具吸引力？这还不够，在追求极致化用户体验过程中，我们同时在防范过度设计，而最好的措施在于让设计回归本质，服务内容，服务用户</p>
		</div>
		<div class="row">
		
		<div class="col-lg-6 col-lg-offset-1">
			<h3>图标绘制</h3>
			<p >品牌不仅关乎设计一个Logo那么简单，即便是一个Logo也需要考虑图形，字体，颜色等多元素的融合。品牌作为视觉传播手段，情感化因素触及到每一处。我们以跨界思维设计每一个品牌，充分考虑简约，易记，永不过时，无论是在传统的印刷上，还是新型的应用媒介上，让其尽显本色</p>
		</div>
		<div class="col-lg-5">
			<img src="images/25.png" style="width: 354px;height: 296px;">
		</div>
		</div>
		<div class="row">
		<div class="col-lg-5 col-lg-offset-1">
			<img src="images/26.png" style="width: 300px;height: 296px;">
		</div>
			<div class="col-lg-6">
			<h3>交互设计</h3>
			<p>品牌不仅关乎设计一个Logo那么简单，即便是一个Logo也需要考虑图形，字体，颜色等多元素的融合。品牌作为视觉传播手段，情感化因素触及到每一处。我们以跨界思维设计每一个品牌，充分考虑简约，易记，永不过时，无论是在传统的印刷上，还是新型的应用媒介上，让其尽显本色</p>
		</div>		
		</div>
	</div>
</div>
<div id="page5" style="padding-top: 40px;padding-bottom: 50px;">
	<div class="container">
		<div class="row">
		<div class="col-lg-6">
			<div>
				<h2>网站设计开发</h2>
				<p>一个好网站对品牌传播和产品销售是不言而喻的。这不仅关乎到面子，而且关系到收入。我们细致优化每项流程，都在为你的品牌带来新价值。</p>
			</div>
			<div>
				<h3>响应式设计</h3>
				<p>Enqoo设计师们对设计趋势的敏感度首屈一指，利用响应式布局技术，充分适应所有分辨率的手机、平板电脑和台式机。从而在商业策略上抢先一步！</p>
			</div>
		</div>
		<div class="col-lg-6">
			<img src="images/27.png" alt="">
		</div>
		<div class="row">
			<div class="col-lg-6">
				<img src="images/28.png" alt="">
			</div>
			<div class="col-lg-6">
				<h3>HTML5和CSS3技术</h3>
				<p>HTML5 精炼的Web结构，意味着更快的载入速度，和更好的优化效果。配合CSS3众多特效，即便是移动网站瞬间光彩夺目。 Enqoo的工程师们紧握科技潮流，充分利用现代网络技术，让你的网站在移动端浏览也畅通无阻。</p>
			</div>			
		</div>
		<div class="row">
			<div class="col-lg-6">
				<h3>CMS</h3>
				<p>我们对诸如Joomla、WordPress等CMS程序开发娴熟，你可以根据需求定制扩展，个性化你的站点。当然，我们更乐意为你提供最佳的解决方案。</p>
			</div>
			<div class="col-lg-6">
				<img src="images/29.png" alt="">
			</div>
		</div>
		</div>
	</div>	
</div>
<div id="page6" style="background:#eeeeee;padding-top: 40px;padding-bottom: 40px;">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-4 col-xs-8 col-xs-offset-3">
				<h1>移动应用设计开发</h1>				
			</div>
		</div>
		<div class="row">
			<div class="col-lg-9 col-lg-offset-2" style="text-align: center;">
				<p>移动应用不是Web应用的简单改造或延伸，我们以全新的视角审度每一款应用，无论是iPhone还是Android，我们同样遵循少即多的原则，排除视觉干扰，拒绝臃肿繁杂的功能，以快速的迭代机制，让用户因为更新而感到惊喜。</p>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-9 col-lg-offset-3 col-xs-1" id="bbb">
				<img src="images/30.png" style="width: auto;height: 320px;">
			</div>
		</div>		
	</div>
</div>
<footer>
	<div class="container-fluid" >
		<div class="row">			
				<div class="col-lg-4 col-xs-12 " id="zhong4">
					<ul  class="list-inline text-center active" >
						<li><a href="#">联络</a></li>
						<li><a href="#">招聘</a></li>
						<li><a href="#">关于</a></li>
						<li><a href="#">Blog</a></li>
					</ul>
				</div>
				<div class="col-lg-4"></div>				
				<div class="col-lg-4 col-xs-12" id="zhong4">
					<ul class="list-inline text-center" >
						<li><a href="#">中文</a></li>
						<li><a href="#">EN</a></li>
					</ul>
				</div>
				<div class="col-lg-12 col-xs-12 text-center" id="zhong8" ><span style="color: #858585">© 2018 Enqoo Inc.</span></div>			
		</div>
	</div>
</footer>
    <script type="text/javascript" src="bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script>
   $(function(){  	
		 $(window).scroll(function(){
			var scrolltop=$(this).scrollTop();
		if(scrolltop>10){
			$("header").addClass("headerStyle");
		}else{
			$("header").removeClass("headerStyle")
		}
		})
		$(".page2 ul li").click(function(){
			sh($(this).index())
		})
		function sh(_index){
			$(".page2 ul li").eq(_index).addClass("a1111").siblings().removeClass("a1111")
		}		 				
}) 
 </script>
    
</body>
</html>